<template>
    <el-container>
        <el-header class="header">
            <el-menu :default-active="activePath" mode="horizontal">
                <el-menu-item><img :src="require('@/assets/logo.png')" class="logo"></el-menu-item>
                <el-menu-item v-for="item in menu_item" :key="item.index" :index="item.index + ''"
                    @click="jump_to_destination(item.index)">
                    <template slot="title"><i :class="item.icon"></i>{{ item.menu_name }}</template>
                </el-menu-item>
                <el-menu-item v-if="user_type === '2'" :index="5 + ''" @click="jump_to_destination(5)">
                    <template slot="title"><svg-icon :iconname="'icon-lvhangshe'"></svg-icon> 导游管理</template>
                </el-menu-item>
            </el-menu>
            <div class="block">
                <el-avatar :size="40"
                    src="https://tupian.qqw21.com/article/UploadPic/2020-8/20208522181570993.jpg"></el-avatar>

                <el-dropdown type="text" trigger="click">
                    <span>{{ username }}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item disabled>
                            <el-descriptions class="margin-top" :column="1" size="small" border>
                                <el-descriptions-item>
                                    <template slot="label"><i class="el-icon-user"></i>账号</template>
                                    {{ account }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label"><i class="el-icon-tickets"></i>ID</template>
                                    {{ id }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-dropdown-item>
                        <hr>
                        <el-dropdown-item>
                            <el-link @click="() => $router.push('/user/personal_center')" style="width:100%"
                                :underline="false"><i class="el-icon-user-solid"></i>个人中心</el-link>
                        </el-dropdown-item>
                        <el-dropdown-item v-if="user_type === '0'">
                            <el-link @click="() => $router.push('/user/to_be_guide')" style="width:100%"
                                :underline="false"><i class="el-icon-circle-plus"></i>成为导游</el-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-link @click="jump_to_my_complaints" style="width:100%" :underline="false"><i
                                    class="el-icon-service"></i>我的投诉</el-link>
                        </el-dropdown-item>
                        <hr>
                        <el-dropdown-item>
                            <el-link @click="() => $router.push('/login')" type="danger" style="width: 100%;"
                                :underline="false"><i class="el-icon-error"></i>退出登录</el-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-main>
            <router-view />
        </el-main>
    </el-container>
</template>

<script>
import SvgIcon from '../reusable_components/SvgIcon.vue'
export default {
    components: {
        SvgIcon
    },
    data() {
        return {
            user_type: 0,
            activePath: '1',
            menu_item: [
                { index: 1, icon: 'el-icon-house', menu_name: '首页', path: 'index' },
                { index: 2, icon: 'el-icon-s-promotion', menu_name: '预约旅行', path: 'book_trip' },
                { index: 3, icon: 'el-icon-s-order', menu_name: '我的预约', path: 'my_appointment' },
                { index: 4, icon: 'el-icon-service', menu_name: '投诉', path: 'complaints' },
            ],
            user_name: '',
            account: '',
            id: '',
        }
    },
    mounted() {
        this.activePath = sessionStorage.index || '1';
        this.user_type = sessionStorage.type;
    },

    created() {
        this.username = sessionStorage.username;
        this.account = sessionStorage.account
        this.id = sessionStorage.user_id
    },
    methods: {

        jump_to_destination(index) {
            // 存储当前页面菜单
            sessionStorage.index = index
            if (index === 5) {
                this.$router.push('/user/guide')
                return
            }
            this.$router.push(`/user/${this.menu_item[index - 1].path}`)
        },

        jump_to_my_complaints() {
            sessionStorage.index = 4
            this.$router.push('/user/my_complaints')
        },

        // 获取用户名...
        async get_username() {
            const res = await this.$http.post("user/login", {
                account: this.LOGIN.account,
                password: this.$md5(this.LOGIN.password),
                validateCode: this.LOGIN.validate_code,
                validateKey: localStorage.validate_key,
            });
        },

    }
}
</script>

<style lang="less" scoped>
.el-header {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: black;
    // position: fixed;
    // top: 0;

    >div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }
    }
}

hr {
    margin: 10px;
}

.logo {
    width: 100px;
    margin-left: 10px;
}
</style>